<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="department.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
</head>

<body>
    <div id="box">
        <div class="banner">
            <div class="banner2"><img src="../image/banner.jpg" /></div>
            <!-- <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../image/1.png" /></div>
                    <div class="swiper-slide"><img src="../image/3.png" /></div>
                    <div class="swiper-slide"><img src="../image/5.png" /></div>
                    <div class="swiper-slide"><img src="../image/6.png" /></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div> -->

            <div class="banner1">
                <div class="banner1box1"><img src="../image/2.png" /></div>
                <div class="banner1box2"><a href="../index/index.html">首页</a></div>
                <div class="banner1box2"><a href="#right1">部门概况</a></div>
                <div class="banner1box2"><a href="#right2">师资队伍</a></div>
                <div class="banner1box2"><a href="">思政建设</a></div>
                <div class="banner1box2"><a href="">红馆</a></div>
                <div class="banner1box2"><a href="">心理健康教育中心</a></div>
                <div class="banner1box2"><a href="">教学科研</a></div>
                <div class="banner1box2"><a href="">学生社团</a></div>
            </div>

        </div>

        <div class="box1">
            <div class="left">
                <div class="banner3">
                    <div>学院概况</div>
                    <div style="font-size: 20px;">College Profile</div>
                </div>
                <ul class="left1">
                    <a href="#right1">
                        <li class="left2">部门概况<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right2">
                        <li class="left2">师资队伍<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right3">
                        <li class="left2">思想建设<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right4">
                        <li class="left2">红馆<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right4">
                        <li class="left2">心理健康教育中心<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right4">
                        <li class="left2">教学科研<img src="../image/qianjin.png" alt=""></li>
                    </a>
                    <a href="#right4">
                        <li class="left2">学生社团<img src="../image/qianjin.png" alt=""></li>
                    </a>
                </ul>
            </div>
            <div id="right1">
                <div class="right1-top">
                    <div class="right1-top1">部门概况</div>
                    <div class="right1-top2">当前所在位置: 首页 >部门概况</div>
                </div>
                <div class="right1-bottom">
                    <div class="right1-bottom1">部门概况</div>
                    <div class="right1-bottom2">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采。“课比天大，是一幅字、一块属，
                         是心照不宫的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、
                         一块画，是心照不宣的默契三尺讲台育英才，一方舞台展风采。
                         “课比天大，是一幅字、一块偏，是心服不宣的默契三尺讲台育英才，
                         一方舞台展风采课比天大，是一幅字、一块疆，
                         是心照不宣的默契三尺讲台育英才，一方舞台展风采，
                        “课比天大，是一幅字、一块隔，是心照不宫的默契三尺讲台育英才，
                        一方舞台展风采课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采。“课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采课比天大，是一幅字、一块，是心照不的默契。三尺讲台育英才，一方舞台展风采。
                        “课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、
                        一块，是心照不宣的默契三尺讲台育英才，一方舞台展风采。"课比天大，是一幅字、一块，
                        是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块属，是心照不宣的默三尺讲台育英才，
                        一方舞台展风采。“课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、
                        一块篇，是心照不宣的默契三尺讲台育英才，一方舞台展风采。"课比天大，是一幅字、一块遍，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采课比天大，是一幅字、一块，是心照不宫的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、
                        一块，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块，是心照不宣的默契。三尺讲台育英才，
                        一方舞台展风采，“课比天大，是一幅字、一块，是心照不当的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块，
                        是心照不宣的默契三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块隔，是心照不宫的默契三尺讲台育英才，一方舞台展风采课比天大，
                        是一幅字、一块画，是心照不宣的默契。<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块网，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采课比天大，是一幅字、一块属，是心照不言的默契三尺讲台育英才，一方舞台展风采。"课比天大，是一幅字、
                        一块隔，是心照不宫的默契三尺讲台育英才，一方舞台展风采课比天大，是一字、一块，是心照不宣的默契三尺讲台育英才，
                        一方舞台展风采。“课比天大，是一幅字、一块，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、
                        一块届，是心照不宣的默契。
                    </div>
                </div>
            </div>
            <div id="right2">
                <div class="right2-top">
                    <div class="right2-top1">师资队伍</div>
                    <div class="right2-top2">当前所在位置: 首页 > 师资队伍</div>
                </div>
                <div class="right2-center">
                    <a href="#right2"><img src="../image/14.png" alt=""></a>
                    <a href="#right2-2"><img src="../image/15.png" alt=""></a>
                    <a href="#right2-3"><img src="../image/16.png" alt=""></a>
                </div>
                <div class="right2-bottom">
                    <ul class="right2-bottom1">
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                        <li class="right2-bottom2">山东城院召开公文写作培训会<text style="float: right;"><img src="../image/17.png" alt="">2022-11-24</text></li>
                    </ul>
                </div>
                <div class="newbottom">
                    查看更多
                    <img src="../image/4.png" alt="">
                </div>
            </div>
            <div id="right2-2">
                <div class="right2-top">
                    <div class="right2-top1">师资队伍</div>
                    <div class="right2-top2">当前所在位置: 首页 > 师资队伍</div>
                </div>
                <div class="right2-center">
                    <a href="#right2"><img src="../image/14.png" alt=""></a>
                    <a href="#right2-2"><img src="../image/15.png" alt=""></a>
                    <a href="#right2-3"><img src="../image/16.png" alt=""></a>
                </div>
                <div class="right2-2bottom">
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="newbottom">
                    查看更多
                    <img src="../image/4.png" alt="">
                </div>
            </div>
            <div id="right2-3">
                <div class="right2-top">
                    <div class="right2-top1">师资队伍</div>
                    <div class="right2-top2">当前所在位置: 首页 > 师资队伍</div>
                </div>
                <div class="right2-center">
                    <a href="#right2"><img src="../image/14.png" alt=""></a>
                    <a href="#right2-2"><img src="../image/15.png" alt=""></a>
                    <a href="#right2-3"><img src="../image/16.png" alt=""></a>
                </div>
                <div class="right3-bottom">
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right3-bot">
                        <div class="ph-w">
                            <div class="ph-img">
                                <img src="../image/3.png" alt="">
                            </div>
                            <div class="ph-wor">
                                <h2>传承八一精神 凝聚奋进力量|马
                                    克思主义学院第一第二。支部开展主题...
                                </h2>
                                <div class="ph-day">
                                    <div class="ph-day-img">
                                        <img src="../image/17.png" alt="">
                                        <div class="ph-day-r">2021-05-21</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="newbottom">
                    查看更多
                    <img src="../image/4.png" alt="">
                </div>
            </div>



            <div id="right3">
                <h1>思想建设</h1>
            </div>
            <div id="right4">
                <h1>红馆</h1>
            </div>
        </div>

        <div class="foot">
            <div class="foottop">
                <div class="foot1">
                    <div class="foot1-1"><img src="../image/2.png" alt=""></div>
                    <div class="foot1-2">地址:&nbsp;&nbsp;&nbsp;&nbsp;
                        山东省烟台市高新区海天路1001号 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        办公室电话:&nbsp;&nbsp;&nbsp;&nbsp;0535-293876</div>
                    <div class="foot1-3"></div>
                </div>
            </div>
            <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
        </div>
    </div>


    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>